<script setup lang="ts">
import { getNewsListApi, changeStatusApi, deleteNewsApi } from '@/api/news'
import { onMounted, ref, computed } from 'vue'
import { formatTime } from '@/utils/formatTime'
import {
    InfoFilled,
    View,
    Delete,
    Edit,
    Platform
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import router from '@/router';
interface NewsType {
    [key: string]: any
    title: string
    content: string
    category: number // 1最新动态    2典型案例   3通知公告，
    cover: string
    isPublish: number   // 0未发布  1已发布
    updateTime: string
}

let newsInfo = ref<NewsType[]>([])
let loading = ref(true)

const search = ref('')
const filterTableData = computed(() =>

    newsInfo.value.filter(
        (data) =>
            !search.value ||
            data.title.toLowerCase().includes(search.value.toLowerCase())
    )
)

const categoryFormat = (category: number) => {
    const categoryList = ['最新动态', '典型案例', '通知公告']
    return categoryList[category - 1]
}

const getNewsList = async () => {
    const result = await getNewsListApi()
    newsInfo.value = result.data.data
}

const handleStatusChange = async (row: NewsType) => {
    console.log(row.isPublish);
    await changeStatusApi(row._id)
    await getNewsList()
    ElMessage({
        type: 'success',
        message: '修改成功'
    })
}

const confirmDelete = async (index: number, row: NewsType) => {
    console.log(row._id);
    await deleteNewsApi(row._id)
    await getNewsList()
    ElMessage({
        type: 'success',
        message: '删除成功'
    })
}

const priviewData = ref()
const dialogVisible = ref(false)
const handlepriview = (row: NewsType) => {
    dialogVisible.value = true
    priviewData.value = row
}

const handleEdit = (row: NewsType) => {    
    router.push({
        path: `/news-manage/newsEdit/${row._id}`
    })
}

onMounted(async () => {
    await getNewsList()
    loading.value = false
})
</script>

<template>
    <div>
        <el-table v-loading="loading" :data="filterTableData" style="width: 100%" max-height="800px" stripe>
            <el-table-column label="标题" prop="title" />
            <el-table-column label="分类" prop="category">
                <template #default="scope">
                    {{ categoryFormat(scope.row.category) }}
                </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="updateTime">
                <template #default="scope">
                    {{ formatTime.getTime(scope.row.updateTime) }}
                </template>
            </el-table-column>
            <el-table-column label="是否发布" prop="isPublish">
                <template #default="scope">
                    <el-tag class="ml-2" :type="scope.row.isPublish === 1 ? 'success' : 'info'">{{ scope.row.isPublish === 1
                        ? '已发布'
                        : '未发布' }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="large" placeholder="搜索标题" />
                </template>
                <template #default="scope">
                    <el-button :disabled="scope.row.role === 1" size="small"
                        @click="handleStatusChange(scope.row)">修改发布状态</el-button>
                    <el-button type="success" plain :icon="View" circle @click="handlepriview(scope.row)" />
                    <el-button type="warning" plain :icon="Edit" circle @click="handleEdit(scope.row)" />
                    <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                        icon-color="rgb(242, 111, 109)" title="确认删除?" @confirm="confirmDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button type="danger" plain :icon="Delete" circle />
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog class="priviewDialog" v-model="dialogVisible" title="新闻预览" width="50%">
            <div class="priviewHeader">
                <h2 class="priviewTitle">{{ priviewData.title }}</h2>
                <p class="priviewTime">{{ formatTime.getTime(priviewData.updateTime) }}</p>
            </div>
            <el-divider>
                <el-icon>
                    <Platform />
                </el-icon>
            </el-divider>
            <div class="priviewBody" v-html="priviewData.content"></div>
        </el-dialog>
    </div>
</template>

<style lang='less' scoped>
::v-deep .priviewDialog {

    img {
        max-width: 85%;
    }

    .priviewHeader {
        height: 70px;

        .priviewTitle {
            margin-bottom: 20px;
        }

        .priviewTime {
            color: #757575;
        }
    }

    .priviewBody {
        padding: 0 15px;
    }
}
</style>